<template>
  <el-dialog
    v-loading="loading"
    :visible.sync="dialog"
    :title="bindPageTitle"
    :close-on-click-modal="false"
    width="700px"
    append-to-body
    @close="cancel"
  >
    <div>
      <div>
        <el-table
          ref="dataTab"
          :data="parent.finelineDataList"
          stripe
          size="mini"
          border
          style="width: 100%;"
        >
          <el-table-column type="index" label="序号" width="50" />
          <el-table-column :show-overflow-tooltip="true" label="部门" prop="deptNbr" />
          <el-table-column :show-overflow-tooltip="true" label="Fineline号" prop="finelineNbr" />
          <el-table-column :show-overflow-tooltip="true" label="Fineline名称" prop="finelineName" />
        </el-table>
      </div>
      <div style="margin-top: 20px">
        <el-form class="searchform" :model="{}" :inline="true" size="mini" label-width="100px">
          <div v-for="item in categoryTypes" :key="item.categoryType">
            <el-form-item :label="item.categoryTypeName">
              <el-cascader
                v-model="item.categoryData"
                :options="item.categoryOptions"
                :props="{ children: 'children', label: 'categoryName', value: 'categoryId', multiple: item.multiple }"
                separator=">"
                filterable
                clearable
                style="width: 500px;"
              />
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" type="text" @click="cancel">取消</el-button>
      <el-button size="mini" type="primary" @click="doSubmit">提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { Message } from 'element-ui'
import { batchUpdate } from '@/api/coi/mapping/fineline-category'
import { getOptions } from '@/views/coi/mapping/js/options'

export default {
  props: {
    parent: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      dialog: false,
      loading: false,
      bindPageTitle: '',
      categoryTypes: []
    }
  },
  methods: {
    getOptions,
    cancel() {
      this.dialog = false
    },
    // 整理待提交数据列表
    arrangeDataList() {
      const toSubmitDataList = []
      const _this = this
      _this.categoryTypes.forEach(categoryType => {
        _this.parent.finelineDataList.forEach(finelineData => {
          const submitDataObj = {}
          submitDataObj.deptNbr = finelineData.deptNbr
          submitDataObj.finelineNbr = finelineData.finelineNbr
          submitDataObj.channelId = categoryType.channelId
          submitDataObj.categoryType = categoryType.categoryType
          submitDataObj.shopCategoryFlag = categoryType.shopCategoryFlag
          if (categoryType.categoryData && categoryType.categoryData.length > 0) {
            if (categoryType.multiple === false) {
              const _submitDataObj = JSON.parse(JSON.stringify(submitDataObj))
              _submitDataObj.categoryId = categoryType.categoryData[categoryType.categoryData.length - 1]
              _submitDataObj.categoryTree = JSON.stringify(categoryType.categoryData)
              toSubmitDataList.push(_submitDataObj)
            } else {
              categoryType.categoryData.forEach(categoryTree => {
                const _submitDataObj = JSON.parse(JSON.stringify(submitDataObj))
                _submitDataObj.categoryId = categoryTree[categoryTree.length - 1]
                _submitDataObj.categoryTree = JSON.stringify(categoryTree)
                toSubmitDataList.push(_submitDataObj)
              })
            }
          } else {
            toSubmitDataList.push(submitDataObj)
          }
        })
      })
      return toSubmitDataList
    },
    // 提交
    async doSubmit() {
      this.loading = true
      const toSubmitDataList = this.arrangeDataList()
      batchUpdate(toSubmitDataList).then(_ => {
        Message({
          message: '操作成功。',
          type: 'success',
          duration: 3 * 1000
        })
        this.parent.toQuery()
        this.loading = false
        this.dialog = false
      }, _error => {
        this.loading = false
        console.log(_error)
      })
    }
  }
}
</script>
<style scoped>
  .fineline-span-item-n {
    margin-left: 15px
  }
</style>
